<template>
  <div>
    <div class="top">
<select>
  <option  v-for="(item,index) in shujuall" :key="index"  @click="caidan(index)">{{item.categoryName}}</option>
</select>
    </div>

      <div class="ingliang" v-for="(item,index) in bottomshuju" :key="index">
<div class="ing-all">
    <div class="omg-o">
        <img  @click="zhong(index)" v-if="bool" src="../../assets/4 (1).png" alt="" class="img-o a">
        <img  @click="zhong(index)" v-else src="../../assets/4 (2).png" alt="" class="img-o" >
    </div>
   

        <img :src="item.goodsPics" alt="">
        <div class="ing-text-all">
            <p class="shenglue">{{item.goodsName}}</p>
            <div class="ing-text">
                <p>{{item.specificationName}}</p>
                <div>{{item.zeroConvert}}</div>
            </div>
                <span>{{item.shopPrice}}/包</span>
        </div>
</div>
      </div>
            <div class="bottom">
                <div class="bottom-one">
                     <img src="../../assets/4 (1).png" alt="">
                     <p>全选</p>
                </div>
                <p class="daili">代理商店  </p>
            </div>



  </div>
</template>

<script>
import qs from 'qs'
export default {
        created(){
//    	window.onscroll = function(){
//    		//变量scrollTop是滚动条滚动时，距离顶部的距离
//    		var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//    		//变量windowHeight是可视区的高度
//    		var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//    		//变量scrollHeight是滚动条的总高度
//    		var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
//                //滚动条到底部的条件
//                if(scrollTop+windowHeight==scrollHeight){
//                 //写后台加载数据的函数
//          	console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
//               }   
//         }
   },
  data() {
    return {
      shujuall:"",
      bottomshuju:"",
      bool:false,
    }
  },
  methods:{
                        postnick(){
                  this.$http.get('https://web-gateway.newbeescm.com/ms-web/goodsLibrary/queryGoodsCategory',{userId:this.$store.state.userInfo.id},{
                            headers: {
              token: this.$store.state.token,
              userId: this.$store.state.userInfo.id
            }      
                  }).then(res => {
                //      console.log(res)
                      this.shujuall = res.data.result
      //    console.log(res.data.result);
       //   this.$router.go(-1);
        })
              },
              caidan(index){
                      console.log("kan",index)
              },
                        newlist(){
                  this.$http.post('https://web-gateway.newbeescm.com/ms-web/goodsLibrary/queryList',
                 qs.stringify({
                        shopId:this.$store.state.maitextall.id,
                        storeId:this.$store.state.order.storeId,
                        goodsType:"",
                        goodsCatId:0,
                        currentPage:3,
                        pageSize:10,
                 }),{
                            headers: {
              token: this.$store.state.token,
              userId: this.$store.state.userInfo.id
            }      
                  }).then(res => {
                    //  console.log('检查',res)
                      this.bottomshuju = res.data.result
        //  console.log(res.data.result);
       //   this.$router.go(-1);
        })
              },

       zhong(index){
           this.bool=true
       }
  },
    mounted(){
   this.postnick();
   this.newlist();
    }
}

</script>
<style lang="scss" scoped>
.bottom{
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    img{
        width: 0.2rem;
        height: 0.2rem;
        margin: 0 0.14rem 0 0.14rem;
    }
    .daili{
        width: 1.2rem;
        background: red;
        font-size: 0.16rem;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        opacity: 0.8;
    }
    .bottom-one{
        display: flex;
        align-items: center;
    }
}
.ing-all{
    .omg-o{
        height: 0.2rem;
        overflow: hidden;
       margin: auto;
            .img-o{
        width: 0.2rem;
        height: 0.2rem;
        margin: 0 0.3rem 0 0.14rem;
    }
    }

    display: flex;
   // align-items: center;
    img{
        margin: 0 0.1rem;
        width: 0.8rem;
        height: 0.8rem;
    }
    .ing-text-all{
        font-size: 0.14rem;
       // width: 0.8rem;
        height: 0.8rem;
        .shenglue{
    width: 2rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
        }
        span{
            color: red;
        }
        .ing-text{
            display: flex;
            font-size: 0.12rem;
            color: rgb(136, 130, 130);
            align-items: center;
            margin-bottom:0.1rem; 
          //  flex-direction: column;
            div{
                margin-left: 0.2rem;
                display: flex;
            }
        }
    }
}
.ingliang{
    padding: 0.1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .yidong{
        margin-right: 0.14rem;
    }
}
.top{
    height: 0.4rem;
  //  background: red;
  display: flex;
  align-items: center;
  img{
      width: 0.05rem;
      height: 0.1rem;
      transform: rotate(-90deg);
      margin-left: 0.1rem;
  }
    select{
        width: 90%;
           height: 0.2rem;
    color: #afbac0;
    border: none;
    outline: none;
    /*去掉默认的下拉三角*/
    appearance:none;  
    -moz-appearance:none;  
    -webkit-appearance:none;
        margin-left: 0.14rem;
      //  line-height: 0.4rem;
        font-size: 0.12rem;
        color:""
    }
}
</style>
